<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <link href="js/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(function (){

            $(".btn").click(function (){
                var city = $("input[name=city]").val();
                $.ajax({
                    url:"https://tianqiapi.com/api?version=v6&appid=78382537&appsecret=pHIN4nTA&city="+city,
                    async:false,
                    type:"GET",
                    dataType: "jsonp",
                    success:function (data){
                        console.log(data);
                        $("#1").text("城市: " + data.city);
                        $("#2").text("当前日期: " + data.date);
                        $("#3").text("当前星期: " + data.week);
                        $("#4").text("天气情况: " + data.wea);
                        $("#5").text("实时温度: " + data.tem);
                        $("#6").text("最高气温: " + data.tem1);
                        $("#7").text("最低气温: " + data.tem2);
                        $("#8").text("风向: " + data.win);
                        $("#9").text("风速: " + data.win_meter);
                        $("#10").text("湿度: " + data.humidity);
                        $("#11").text("空气质量: " + data.air);
                        $("#12").text("空气质量描述: " + data.air_tips);
                    }
                });

            });


        });
    </script>
</head>
<body>
    <form id="tianqiForm">
        <input type="text" name="city" placeholder="请输入城市">
    </form>
    <button class="btn btn-success">查询</button>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-4 column">
                <span id="1"></span>
            </div>
            <div class="col-md-4 column">
                <span id="2"></span>
            </div>
            <div class="col-md-4 column">
                <span id="3"></span>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-4 column">
                <span id="4"></span>
            </div>
            <div class="col-md-4 column">
                <span id="5"></span>
            </div>
            <div class="col-md-4 column">
                <span id="6"></span>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-4 column">
                <span id="7"></span>
            </div>
            <div class="col-md-4 column">
                <span id="8"></span>
            </div>
            <div class="col-md-4 column">
                <span id="9"></span>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-4 column">
                <span id="10"></span>
            </div>
            <div class="col-md-4 column">
                <span id="11"></span>
            </div>
            <div class="col-md-4 column">
                <span id="12"></span>
            </div>
        </div>
    </div>
</body>
</html>